import "../sass/sousuo.scss";

import { useParams, useNavigate } from "react-router-dom";
import { NavBar, Search, Toast } from "react-vant";
import Product from "../components/Product";
import { useState, useEffect } from "react";
import axios from "axios";

function Sousuo() {
    //截取路由参数
    let params = useParams();
    let navigate = useNavigate();
    let [value, setValue] = useState("");
    let [dedata, setDedsate] = useState([]);

    let getsousuo = () => {
        let name = value;
        axios({
            method: "get",
            url: "/search",
            params: {
                name,
            },
        })
            .then((res) => {
                console.log("搜索", res.data.result);
                setDedsate(res.data.result);
            })
            .catch((err) => {});
    };

    useEffect(() => {}, []);
    return (
        <div className="sousuo">
            <NavBar
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            ></NavBar>
            <div className="kuang">
                <Search
                    shape="round"
                    value={value}
                    onChange={setValue}
                    placeholder="请输入搜索关键词"
                    showAction
                    onSearch={(val) => {
                        setValue(val);
                        getsousuo();
                    }}
                />
            </div>
            <div className="remai">
                <div className="maipro">
                    {dedata.map((item, index) => {
                        return (
                            <div
                                className="product-item"
                                key={index}
                                onClick={() => {
                                    navigate(
                                        `/detail/${item.pid}`
                                    );
                                }}
                            >
                                <Product
                                    pro={item}
                                ></Product>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}

export default Sousuo;
